<template>
  <div>
    <div
      v-if="
        cinema != null &&
          films != null &&
          $refs != null &&
          schedules.length != 0
      "
    >
      <van-sticky>
        <!-- 下拉吸顶的标签栏1 -->
        <van-nav-bar
          left-arrow
          :title="cinema.name"
          @click.native="$router.go(-1)"
          v-if="showTop"
        >
          <template #left-arrow>
            <van-icon name="search" size="18" />
          </template>
        </van-nav-bar>
      </van-sticky>

      <!-- 标签栏1 -->
      <van-nav-bar left-arrow @click.native="$router.go(-1)">
        <template #left-arrow>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>

      <!-- 名字 -->
      <div class="CinemaList-title" :key="'mykey1'">{{ cinema.name }}</div>
      <!-- 标签栏2 -->
      <div class="CinemaList-tag">
        <div class="CinemaList-tag-1">
          <van-tag
            plain
            type="warning"
            v-for="(item, index) in cinemaService"
            :key="index + 'wanwan'"
            >{{ item.name }}</van-tag
          >
          <van-icon
            name="arrow"
            class="CinemaList-tag-arrow"
            @click.native="MyDialog2(cinemaService)"
          />
          <van-dialog
            v-model="show"
            title="注意事项"
            show-cancel-button
            class="module-dialog-detail"
          >
            <div v-for="item in cinema.services" :key="item.name">
              <div class="services-van-tag-div">
                <van-tag plain type="primary" class="services-van-tag">{{
                  item.name
                }}</van-tag>
              </div>

              <span class="services-description-detail">{{
                item.description
              }}</span>
            </div>
          </van-dialog>
        </div>
      </div>
      <!-- 标题栏 -->
      <div>
        <van-nav-bar :title="cinema.address" left-text="返回" left-arrow>
          <template #left>
            <van-icon
              name="location-o"
              size="28px"
              color="black"
              @click.native="MyDialog(cinema.gpsAddress)"
            />
          </template>
          <template #right>
            <a href="tel:10086">
              <van-icon name="phone-o" size="28px" color="black" />
            </a>
          </template>
        </van-nav-bar>
      </div>

      <!-- 滑页效果 请别改 -->

      <swiper
        ref="mySwiper"
        :options="swiperOptions"
        :key="'mySwiper'"
        style="position:relative"
      >
        <div
          style="position:absolute;width:2000px;height:350px;top:0;left:0;filter:blur(100px) "
          :style="{ backgroundImage: `url(${films[swiperPage].poster})` }"
        ></div>
        <swiper-slide
          class="swiper-slide"
          v-for="(item, index) in films"
          :key="JSON.stringify(item) + 'wanwanaini1' + item.poster + index"
          :style="{ backgroundImage: `url(${item.poster})` }"
        >
        </swiper-slide>
      </swiper>

      <!-- 吸顶 -->
      <van-sticky :offset-top="45">
        <van-cell-group>
          <van-cell class="cell-top">
            <div class="cell-detail-nameAndGrade">
              <span class="cell-title-name" :key="Film.name + '10'">{{
                Film.name
              }}</span>
              <span class="cell-title-grade" :key="Film.grade + '22'"
                >{{ Film.grade }}分</span
              >
            </div>

            <div class="cell-detail-msg">
              {{ Film.category }}{{ Film.runtime }}{{ Film.director }}
            </div>

            <van-icon name="arrow" class="icon-arrow-style" />
          </van-cell>
        </van-cell-group>
      </van-sticky>

      <van-tabs
        v-model="active"
        @click="add(active)"
        :sticky="tepValue"
        offset-top="105px"
      >
        <van-tab
          v-for="(item, index) in Film.showDate"
          :title="timeClear(item)"
          :key="JSON.stringify(item) + index + 'lalaaini'"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            style="height: 100%; width: 100%"
          >
            <van-cell
              v-for="(items, indexs) in list"
              :key="JSON.stringify(items) + indexs + 'jiaranaini'"
              class="list-common"
            >
              <div class="van-cell-schedules-default" style="margin-right:20px">
                <div>
                  {{ items.filmLanguage || null }}{{ items.imagery || null }}
                </div>
                <div>{{ items.hallName || null }}</div>
              </div>

              <template #title>
                <div class="custom-title">
                  {{ (new Date(parseInt(items.showAt) * 1000).getHours() ) &lt;10 ? "0"+ new Date(parseInt(items.showAt) * 1000).getHours(): new Date(parseInt(items.showAt) * 1000).getHours()


                  }}:
                  {{ (new Date(parseInt(items.showAt) * 1000).getMinutes() )&lt;10 ?"0"+new Date(parseInt(items.showAt) * 1000).getMinutes() :new Date(parseInt(items.showAt) * 1000).getMinutes() }}
                </div>
              </template>
              <template #label>
                <div class="custom-title">
                  {{ (new Date(parseInt(items.endAt) * 1000).getHours() )&lt;10 ? "0"+ new Date(parseInt(items.endAt) * 1000).getHours():new Date(parseInt(items.endAt) * 1000).getHours()

                  }}:{{
                  new Date(parseInt(items.endAt) * 1000).getMinutes() &lt;10 ? "0"+ new Date(parseInt(items.endAt) * 1000).getMinutes() :new Date(parseInt(items.endAt) * 1000).getMinutes()

                  }}散场
                </div>
              </template>
              <template #extra>
                <div class="button-left-div">
                  &yen;{{ items.salePrice / 100 }}
                </div>
                <van-button
                  plain
                  hairline
                  type="primary"
                  size="small"
                  class="button-orange"
                  @click="routerSeat(items.scheduleId)"
                  >购票</van-button
                >
              </template>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else class="custom-image-body">
      <!-- 网络错误 -->
      <!-- <van-empty image="network" description="加载中，亲稍后"  class="custom-image"/> -->
      <van-loading
        size="100px"
        vertical
        type="spinner"
        text-size="30px"
        color="#919191"
        class="custom-image"
        >加载中...</van-loading
      >
    </div>
  </div>
</template>

<script>
import detail from "../../request-get/ToCinema-request-detail.js";
import films from "../../request-get/ToCinema-request-films.js";
import mixin from "../../request-get/ToCinema-request-mixin";
import { Dialog } from "vant";

export default {
  name: "CinemaList",
  data() {
    let that = this;
    return {
      // showTop 这是粘性布局的顶部显示 下拉后显示
      showTop: false,
      // 这个等下用来切换
      tepValue: false,
      // 下拉滚动数据
      scroll: "",
      // 模态框是否显示
      show: false,
      // 绑定swiper页码
      swiperPage: 0,
      // 选中的日期
      active: 0,
      // 获取的时间排班表
      schedules: [],
      // 根据你选择的时间来筛选排班时间表
      pushSchedules: [],
      cinemaService: "",
      // 下拉列表的参数
      list: [],
      loading: false,
      finished: false,
      // 自己设置的list
      cinema: undefined,
      films: [],
      Film: "",
      // 当前时间
      dateNow: null,
      // 计时器
      setTime: 0,
      // swiper数据配置 不要改（官网设置的）
      // 10月2日 我改了配置 注意这个 observer
      swiperOptions: {
        // Some Swiper option/callback...
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        preventLinksPropagation: false,
        observer: true,
        observeParents: true,
        activeIndex: 0,
        initialSlide: 0, //从0开始 设置起始页
        // 这里开始是百度方法
        freeMode: false,
        touchRatio: 0.5,
        longSwiperRadio: 0.1,

        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        on: {
          //  这个函数是swiper自带的一个函数
          transitionEnd: function() {
            // 这个activeIndex是swiper的动态页码
            that.swiperPage = 0;
            // console.log(this.activeIndex, "123123====123");
            that.swiperPage = this.activeIndex;
            // console.log(this.activeIndex, "这是活动页码");
            // console.log(this.realIndex, "这是当前页码");
            that.Film = that.films[that.swiperPage];
            // active这个用来复原底下的时间栏
            that.add(0);
            that.active = 0;
          },
        },
      },
    };
  },
  methods: {
    // 模态框提示1 （提示gps）
    MyDialog(msg) {
      Dialog({
        title: "经纬度",
        message: `${msg.split(":")[0]},${msg.split(":")[1]}`,
      });
    },
    // 模态框提示2 （这个用来提示注意事项的）
    MyDialog2(msg) {
      // console.log(msg);
      this.show = true;
    },
    // 这个点击 是切换时间哪一天的院线信息（别改）
    add(index) {
      // 我只要需要知道当前轮播到的哪一张图片的showDate就行
      let time = this.Film.showDate[index];
      this.$store.commit("setdateNow",time);
      // console.log(time);
      import("../../store/index.js")
        .then((res) => {
          // console.log(res.default.state.cinemaId);
          return mixin(
            res.default.state.filmId,
            res.default.state.cinemaId,
            time
          );
        })
        .then((res1) => {
          // console.log(res1.data.data, "_+_+_+_+_+_");
          if (
            res1.data.data.schedules.length > 0 &&
            this.schedules.length >= 1
          ) {
            this.schedules.splice(0);
            this.list.splice(0);
            // console.log(this.schedules);
            for (let i = 0; i < res1.data.data.schedules.length; i++) {
              this.schedules.push(res1.data.data.schedules[i]);
            }
          }
          // console.log(this.schedules, "这是点击后赛选出来的值");
          // 每次点击后 list 清空
          this.list.splice(0, this.list.length);
          // 重新加载
          this.onLoad();
          console.log(this.list);
         
         
    
          
          
        });
    },
    // 转化时间戳
    timeClear(ns) {
      var date = new Date();
      var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      // console.log(date.getDate());
      let x = new Date(parseInt(ns) * 1000);
      // console.log(x.getFullYear());
      let month = x.getMonth()+1;
      let day = x.getDate();
      let dayNow = x.getDay();
      // console.log(day);

      if (day - date.getDate() < 1) {
        return "今天" + month + "月" + day + "日";
      } else if (day - date.getDate() == 1) {
        return "明天" + month + "月" + day + "日";
      } else if (day - date.getDate() == 2) {
        return "后天" + month + "月" + day + "日";
      } else {
        return weeks[dayNow] + month + "月" + day + "日";
      }
    },
    onLoad() {
      this.setTime = setTimeout(() => {
        let core = this.list.length;
        for (let i = 0; i < 5; i++) {
          if (core + i >= this.schedules.length) {
            this.finished = true;
            console.log(this.list,"我是要看这个list的");
            break;
          }
          this.list.push(this.schedules[core + i]);
        }
        this.loading = false;
        // 加载状态结束
        if (this.list.length >= this.schedules.length) {
          this.finished = true;
        }
      }, 200);

    },
    // 获取院线信息
    getFilmAll(res2) {
      // console.log(res2, "这是上面嗷嗷嗷");
      // console.log(res2.data.data.films, "----------");
      // 设置当前时间
      // console.log(this.dateNow, "z这也是当前时间戳");
      // 当院线信息存在的时候
      if (res2.data.data.films.length != 0) {
        this.dateNow = res2.data.data.films[0].showDate[0];
        /* 这里做到设置一个局部变量来存films的所有影片信息*/
        for (let i = 0; i < res2.data.data.films.length; i++) {
          this.films.push(res2.data.data.films[i]);
        }
        this.$store.commit("setfilmList", res2.data.data.films);
        this.$store.commit("setfilmId", res2.data.data.films[0].filmId);
        // console.log(res2.data.data.films[0].filmId, "这是当前的filmid ");
        this.$store.commit("setdateNow", res2.data.data.films[0].showDate[0]);
        this.dateNow = res2.data.data.films[0].showDate[0];
        this.$store.commit("setdateNow", res2.data.data.films[0].showDate[0]);
        return import("../../store/index.js");
      } else {
        this.$router.push({
          path: "noCinemas",
          query: {
            CinemaId: this.$store.state.cinemaId,
          },
        });
        return 0;
      }
    },
    // 获取下拉滚动scroll
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll >= 150) {
        this.showTop = true;
        this.tepValue = true;
      } else if (this.scroll < 150) {
        this.showTop = false;
        this.tepValue = false;
      }
    },
    routerSeat(e) {
      // 其实应该做登录验证的 未来的某一天再写吧 别忘了 最好是一个token
    this.$router.push({
      path:"/Self",
      query:{
       scheduleId:e,
       filmId:this.$store.state.filmId,
       cinemaId:this.$store.state.cinemaId,
       date:this.$store.state.dateNow
      }
    })


    },
  },
  computed: {
    msg() {
      return this.$store.state.cinemaId;
    },
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    cinemaSet() {
      if (this.cinema) {
        return this.cinema;
      }
    },
    cinemaSlice() {
      if (this.cinema.services.length) {
        if (this.cinema.services.length < 4) {
          return this.cinema.services || null;
        } else if (this.cinema.services.length >= 4) {
          // console.log(this.cinema.services.slice(0, 4));
          return this.cinema.services.slice(0, 4);
        }
      } else {
        return [];
      }
    },
  },
  async mounted() {
    console.log(this.list);
    // 这是影院信息请求
    try {
      window.addEventListener("scroll", this.menu);
      await import("../../store/index.js")
        .then((res) => {
          return detail(res.default.state.cinemaId);
        })
        .then((res1) => {
          // 深拷贝

          this.cinema = res1.data.data.cinema;
          this.cinemaService = this.cinema.services;
          // console.log(this.cinemaService,"这是查询server的值");
        });

      let cinemasList = import("../../store/index.js")
        .then((res1) => {
          return films(res1.default.state.cinemaId);
        })
        .then((res2) => {
          // 后期查看是否有院线信息
          for (let i = 0; i < res2.data.data.films.length; i++) {
            if (this.$store.state.filmId == res2.data.data.films[i].filmId) {
              this.swiperOptions.initialSlide = i;
            }
          }

          return this.getFilmAll(res2);
        });

      // 判断是否存在 比如霸座牙托这个地方
      cinemasList.then((res3) => {
        if (res3) {
          cinemasList
            .then((res3) => {
              // console.log(res3.default.state.filmId,"这是filmId 我要看");
              return mixin(
                res3.default.state.filmId,
                res3.default.state.cinemaId,
                res3.default.state.dateNow
              );
            })
            .then((res4) => {
              if (res4.data.data) {
                this.schedules = res4.data.data.schedules;
              } else {
                this.$router.push({
                  path: "noCinemas",
                  query: {
                    CinemaId: this.$store.state.cinemaId,
                  },
                });
              }
            });
        } else {
          return 0;
        }
      });

      //  this.swiper.init();
      // 这里等下用来判断 放进来的是什么影片
    } catch (err) {
      // console.log(err);
    }
  },
  beforeDestroy() {
    clearTimeout(this.setTime);
  },
};
</script>

<style scoped>
/* 设置swiper滑页的效果 开头 */

.swiper-slide {
  background-position: center;
  /* background-size: cover; */
  /* filter:blur(10px); */
  width: 120px;
  height: 150px;
}

/* 设置swiper滑页的效果 结尾 */

/* title的大小样式 */
.CinemaList-title {
  width: 100%;
  line-height: 45px;
  height: 45px;
  text-align: center;
}
.CinemaList-tag {
  width: 100%;

  text-align: center;
  height: 38px;
}
.CinemaList-tag-1 {
  margin: 0 auto;
  width: 80%;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

/* 标签间距 */
.CinemaList-tag span {
  margin-left: 10px;
  margin-right: 5px;
}
/* 右箭头 */
.CinemaList-tag-arrow {
  font-size: 12px;
  color: rgb(248, 214, 23);
}

.van-cell-schedules-default {
  text-align: left;
  /* transform:translateX(-20px) */
  flex: 1;
  /* width:50% */
}
.list-common {
  width: 100%;
  height: 74px;
  padding: 15px 15px;
}
.van-cell-schedules-default div:nth-child(1) {
  color: #323233;
  font-size: 14px;
  line-height: 24px;
}
.van-cell-schedules-default div:nth-child(2) {
  color: #969799;
  font-size: 12px;
  line-height: 18px;
  margin-top: 4px;
}
.button-left-div {
  font-size: 15px;
  padding-top: 12px;
}
.button-orange {
  border: 1px solid #ff5f16;
  border-radius: 4px;
  color: #ff5f16;
  margin-top: 10px;
  margin-left: 10px;
}
/* 以下是边框内的样式  烦死了 */
.icon-arrow-style {
  width: 40px;
  list-style: 20px;
  position: absolute;
  top: 20px;
  right: 10px;
}
.cell-top {
  position: relative;
}
.cell-detail-nameAndGrade {
  width: 100%;
  text-align: center;
}
.cell-title-name {
  font-size: 15px;
  color: #191a1b;
  padding-right: 5px;
  margin-bottom: 10px;

  text-align: center;
  line-height: 18px;
  /* transform: translateX(20px); */
}

.van-cell__title {
  width: 35%;
}
.cell-title-grade {
  font-size: 16px;
  font-style: italic;
  color: #ffb232;

  margin-bottom: 10px;
  text-align: right;
  line-height: 18px;
}
.cell-detail-msg {
  width: 100%;
  text-align: center;
  height: 18px;
  color: #797d82;
  font-size: 13px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 服务信息的style */
.module-dialog-detail {
  text-align: left;
}
.services-van-tag-div {
  display: inline-block;
  height: 20px;
}
.services-van-tag {
  text-align: left;
  margin-left: 10px;
  line-height: 20px;
}
.services-description-detail {
  /* text-align: left; */
  font-size: 12px;
  line-height: 16px;
  margin-left: 10px;
  margin-right: 5px;
}
/* 动画 */
.custom-image {
  /* width: 100%; */
  /* line-height:100% */
  /* margin-top:100px; */
  position: fixed;
  top: 35%;
  left: 35%;
}
.custom-image-body,
body,
html {
  width: 100%;
  height: 100%;
}
</style>
